<template>
  <div v-transfer-dom>
    <popup v-model="showPopup">
      <div class="h44 px12 white-bg" flex="main:justify">
        <a class="text3" @click="showPopup = false">取消</a>
        <a class="c7" @click="confirmTime">确认</a>
      </div>
      <picker :data='list' :columns="3" v-model="choose" ref="picker1"></picker>
    </popup>
  </div>
</template>
<script>
  import {Picker} from 'vux'

  export default {
    props: ['value', 'show'],
    data() {
      return {
        choose: [],
        list: []
      }
    },
    async created() {
//      const cityJson = await import('./citydata.json')
//      const arr = []
//      const loop = (v, parent) => {
//        v.forEach(({name, children, code}) => {
//          arr.push({name, parent, value: code})
//          if (children) {
//            loop(children, code)
//          }
//        })
//      }
//      loop(cityJson, 0)
//      this.list = arr
//      console.log(JSON.stringify(arr)) // 这样消耗性能，所以我把源文件转成数组后存取起来了
      const list = await import('./cityArray.json')
     // console.log(list)
      this.list = list
    },
    computed: {
      address() {
        return this.value.split(' ').map(x => this.list.find(a => a.name == x.name).value)
      },
      showPopup: {
        set(v) {
          this.$emit('update:show', v)
        },
        get() {
          return this.show
        }
      }
    },
    methods: {
      confirmTime() {
        this.showPopup = false
        const names = this.choose.map(x => this.list.find(a => a.value == x).name)
        this.$emit('input', names.join(' '))
      }
    },
    components: {
      Picker
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
